<template>
  <view class="orderDetails">
    <!-- 物流信息 -->
    <view class="logisticsInfo" >
      <view class="list flex-r-b-c">
        <view class="list_l flex-r-s-c">
          <image src="../../static/icon/ddwlxx.png" mode="widthFix"></image>
          <view class="list_l_l">
            <view class="state" v-html="status"></view>
            <view class="title" v-if="orderDetails.order.address_type==2&& wuliuStatus">可通过“查看物流”进行查看</view>
          </view>
        </view>
        <view v-if="orderDetails.order.address_type==2">
          <view class="list_r" @click="goLogistics(orderDetails.order.orderid)" v-if="wuliuStatus">查看物流</view>
          <view class="list_r" @click="deliverGoods(orderDetails.order,0)" v-if=" orderDetails.order.status == 4 && orderDetails.order.after_sale==0">填写单号</view>
        </view>


        <view class="list_r" @click="deliverGoods(orderDetails.order,1)" v-if="orderDetails.order.address_type==1 &&
        orderDetails.order.after_sale==0  && orderDetails.order.status!= 2 && orderDetails.order.status!= 1 && orderDetails.order.status != 3  && orderDetails.order.status != 8 ">点击核销</view>
      </view>
    </view>

    <!-- 店铺信息 -->
    <view class="shopInfo" v-if="orderDetails.order.address_type!=1">

      <!-- 用户 -->
      <view class="userInfo flex-r-b-c">
        <view class="user flex-r-s-c">
          <view class="text">收货人：</view>
          <view class="name">{{orderDetails.order.rname || ''}}</view>
        </view>
        <view class="user flex-r-s-c">
          <view class="text">电话：</view>
          <view class="tel">{{orderDetails.order.rphone || ''}}</view>
        </view>
      </view>
      <!-- 分界线 -->
      <view class="division" ></view>
      <view class="addressBox flex-r-s-c" >
        <view class="text">地址：</view>
        <view class="address">{{orderDetails.order.raddress || ''}}</view>
      </view>
    </view>
    <!-- 产品列表 -->
    <view class="productList">
      <!-- 列表 -->
      <view class="list" v-for="(item,index) in orderDetails.goods" :key="index">
        <!-- 产品 -->
        <view class="list_c flex-r-b-c">
          <item-image :img="item.image" :height="190" :width="236"></item-image>
          <view class="list_c_f flex flex-column flex_bt u-margin-left-20" style="height: 190rpx;width: 100%">
            <view class="u-flex flex_bt">
              <view class="name">{{item.name}}</view>
              <view v-if="orderDetails.order.status != 1 || orderDetails.order.status != 6 || orderDetails.order.status != 8">
                <view class="price" v-if="orderDetails.order.after_sale == 1">等待退款</view>
                <view class="price" v-if="orderDetails.order.after_sale == 2">退款成功</view>
                <view class="price" v-if="orderDetails.order.after_sale == 3">退款失败</view>
              </view>
            </view>
            <view class="money_box u-flex flex_bt">
              <view class="price u-flex">¥<text>{{item.price * item.gnum}}</text></view>
              <view class="quantity">X{{item.gnum}}</view>
            </view>
          </view>
        </view>
        <view  class="u-flex flex_bt zong">
          <view class="u-flex jine">总金额:  <view class="price u-flex"><text>¥{{priceAll}}</text></view></view>
          <view class="u-flex" v-if="orderDetails.order.after_sale == 1">
            <view class="cancel" @click="closeMoney">取消申请</view>
            <view class="qui" @click="submit">确认</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="orderList">
      <view class="list_t u-flex flex_bt">
        <view>订单信息</view>
        <view class="list_f" v-if="orderDetails.order.address_type==1">
          门店自提
        </view>
        <view class="list_f" v-else>
          邮寄到家
        </view>
      </view>
      <view class="list_b">
        <view class="list u-flex flex_bt">
          <view class="list_l">订单编号：</view>
          <view class="list_f">{{orderDetails.order.orderid}}</view>
        </view>
        <view class="list u-flex flex_bt">
          <view class="list_l">下单时间：</view>
          <view class="list_f">{{orderDetails.order.buytime}}</view>
        </view>
        <view class="list u-flex flex_bt" v-if="orderDetails.order.pay_time">
          <view class="list_l">支付时间：</view>
          <view class="list_f">{{orderDetails.order.pay_time}}</view>
        </view>
      </view>
    </view>
    <OrderDeliver v-if="showModal" :list="explist" ef="child"  :title="title" @submit="endSever" @close="close"  ></OrderDeliver>
  </view>
</template>

<script>
import OrderDeliver from "../../components/order/orderDeliver";
export default {
  components: {OrderDeliver},
  data() {
    return {
      showModal:false,//发货弹框控制
      options: {}, // 页面接收参数
      orderDetails: {} , // 订单详情数据
      explist:[],
      title:'填写物流单号',
      formData:{},
      priceAll:0,//总金额

    };
  },
  computed:{
    //能查看物流状态的判断
    wuliuStatus(){
      if(this.orderDetails.order){
        return   this.orderDetails.order.status == 2 ||this.orderDetails.order.status == 3||this.orderDetails.order.status == 8
      }
    },
    status(){
      //1-待付款；2-待收货；3-待评价；4-待发货;6-已取消；7-已付款（状态7仅用于拼团）8-已评价；
      if(this.orderDetails.order){
        switch (this.orderDetails.order.status){
          case 1:return '待付款'
          case 2:return '待收货'
          case 3:return '待评价'
          case 4:return '待发货'
          case 6:return '已取消'
          case 7:return '已付款'
          case 8:return '已评价'
        }
      }

    },
  },

  onLoad(options) {
    this.options = options
    this.getShopOrderDetails() // 获取商品订单详情
    this.expList() //

  },
  methods:{
    //发货 核销
    deliverGoods(data,index){
      if(index == 1) this.title = '核销'
      this.formData = data
      this.showModal = true
    },
    close(){
      this.showModal = false
    },
    //查询物流
    expList(){
      this.$api.expList().then(res => {
        this.explist = res.data
      })
    },
    // 确认发货 核销
    endSever(data){
      if(data.number){
        this.$api.writeOff({code:data.number}).then(res => {
          this.$u.toast('核销成功')
          this.showModal = false
          this.closeData()
        })
      }else {
        let form = {
          type:1,
          wname:data.data.ecode,
          waybillno:data.code,
          orderid:this.formData.orderid,
        }
        this.$api.OrderStatus(form).then(res => {
          this.$u.toast('发货成功')
          this.showModal = false
          this.closeData()
        })
      }
    },
    // 获取订单详情
    getShopOrderDetails(){
      let that = this
      that.$api.orderDetails({orderid: that.options.id}).then(res => {
        that.orderDetails = res.data
        //计算总金额
        that.orderDetails.goods.forEach(data=>{
          let price = data.price * data.gnum

           this.priceAll= this.priceAll + price;
        })
        console.log(this.priceAll)
      })
    },

    // 跳转物流
    goLogistics(orderid){
      this.$u.route({
        url: '/pages/logistics/index',
        params: {
          id:this.options.id
        }
      })

    },
    //确认退款
    submit(){
      let form = {
        type:3,
        orderid:this.orderDetails.order.orderid,
      }
      this.$api.OrderStatus(form).then(res => {
        this.$u.toast('同意退款成功')
        this.getShopOrderDetails()
      })
    },
    closeMoney(){
      let form = {
        type:2,
        orderid:this.orderDetails.order.orderid,
      }
      this.$api.OrderStatus(form).then(res => {
        this.$u.toast('取消成功')
        this.getShopOrderDetails()
      })
    },
  }
}
</script>

<style lang="less">
.orderDetails{
  padding-bottom: 100rpx;

  .logisticsInfo{
    width: 100vw;
    height: auto;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 30rpx;

    .list{
      width: 100%;
      height: 152rpx;
      background-color: #45806E;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 30rpx;

      .list_l{
        image{
          width: 70rpx;
        }
        .list_l_l{
          margin-left: 20rpx;
          .state{
            color: #FFFFFF;
            font-weight: bold;
            font-size: 36rpx;
          }
          .title{
            font-size: 24rpx;
            font-weight: 500;
            color: #FFFFFF;
            opacity: 0.6;
          }
        }
      }

      .list_r{
        width: 164rpx;
        height: 62rpx;
        line-height: 62rpx;
        text-align: center;
        border-radius: 40rpx;
        background-color: #FFFFFF;
        font-size: 26rpx;
        font-weight: 500;
        color: #4B4B4B;
      }
    }
  }
  .shopInfo{
    width: 100vw;
    height: auto;
    background-color: #FFFFFF;
    .shopInfo_t{
      box-sizing: border-box;
      padding: 30rpx;
      image{
        width: 80rpx;
        height: 80rpx;
      }
      .shopInfo_t_f{
        width: 85%;
        .shopInfo_t_f_l{
          .name{
            font-size: 32rpx;
            font-weight: 500;
            color: #4D4D4D;
          }
          .time{
            color: #999999;
            font-size: 24rpx;
            font-size: 500;
            image{
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
            }
          }
        }
        .shopInfo_t_f_f{
          font-size: 24rpx;
          font-weight: 500;
          color: #0F4C3A;
          image{
            width: 24rpx;
            height: 24rpx;
            margin-right: 10rpx;
          }
        }
      }
      //
    }

    .division{
      width: 80%;
      height: 2rpx;
      background-color: #F2F2F2;
      margin: 0 auto;
    }
    //
    .userInfo{
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding: 30rpx;
      .user{
        font-size: 28rpx;
        font-weight: 500;
        .text{
          color: #7C7C7C;
        }
        .name{
          color: #292929;
        }
        .tel{
          color: #4B4B4B;
        }
      }
    }
    //
    .addressBox{
      width: 100vw;
      height: 80rpx;
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      .text{
        color: #7B7B7B;
      }
      .address{
        color: #292929;
      }
    }
  }
  //
  .productList{
    width: 90vw;
    margin: 40rpx auto;
    .list{
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: #FFFFFF;
      margin-bottom: 30rpx;
      .list_t{
        height: 80rpx;
        box-sizing: border-box;
        padding: 0rpx 30rpx;
        border-bottom: 1px solid #F2F2F2;

        .list_t_l{
          font-size: 28rpx;
          color: #4B4B4B;
          font-weight: bold;
        }
        .list_t_f{
          font-size: 24rpx;
          color: #9F9F9F;
          font-weight: 400;
        }
      }
      //
      .list_c{
        box-sizing: border-box;
        padding: 30rpx;
        border-bottom: 1px solid #F2F2F2;
        image{
          width: 236rpx;
          height: 194rpx;
          border-radius: 10rpx;
        }
        .list_c_f{
          .name{
            font-size: 32rpx;
            font-weight: bold;
            color: #3B3B3B;
          }
          .money_box{
            width: 100%;
            .quantity{
              color: #959595;
              font-size: 28rpx;
              font-weight: 500;
            }
            .price{
              color: #FF6C1D;
              font-size: 34rpx;
              font-weight: 400;
              text{
                font-size: 42rpx;
                font-weight: bold;
                display: inline-block;
              }
            }
          }
        }
      }
      //
      .list_b{
        height: 104rpx;
        box-sizing: border-box;
        padding: 0rpx 30rpx;
        image{
          width: 34rpx;
          height: 34rpx;
          margin-right: 10rpx;
        }
        .btn{
          width: 146rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          border: 1px solid #FF6C1D;
          color: #FF6C1D;
          border-radius: 40rpx;
          font-size: 24rpx;
          font-weight: 500;
        }
      }
    }
    //
  }
  //
  .arriveTime_box{
    width: 90vw;
    height: auto;
    margin: 40rpx auto;
    box-sizing: border-box;
    padding: 0rpx 30rpx;
    border-radius: 20rpx;
    background-color: #FFFFFF;
    .list_t{
      height: 88rpx;
      font-size: 28rpx;
      font-weight: 500;
      border-bottom: 1px solid #F2F2F2;

      .list_t_l{
        color: #585858;
      }
      .time{
        color: #4B4B4B;
      }
    }
    .list_b{
      height: 88rpx;
      .list_b_l{
        color: #585858;
      }
      .price{
        color: #FF6C1D;
        font-size: 34rpx;
        text{
          font-size: 42rpx;
          font-weight: bold;
          display: inline-block;
        }
      }
    }
  }
  //
  .orderList{
    width: 90vw;
    height: auto;
    margin: 40rpx auto;
    border-radius: 20rpx;
    background-color: #FFFFFF;
    .list_t{
      height: 80rpx;
      line-height: 80rpx;
      box-sizing: border-box;
      padding: 0rpx 30rpx;
      border-bottom: 1px solid #F2F2F2;
      color: #898989;
      font-weight: 500;
      font-size: 24rpx;
      .list_f{
        font-size: 32rpx;
        color: #45806E;
      }
    }
    .list_b{
      height: auto;
      box-sizing:  border-box;
      padding: 10rpx 30rpx;
      .list{
        height: 60rpx;
        color: #585858;
        font-weight: 500;
        .list_l{
          font-size: 28rpx;
        }
        .list_f{
          font-size: 24rpx;
          text{
            display: inline-block;
            color: #FF6C1D;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
.price{
  color: #FF6C1D;
  font-weight: bold;
}
.zong{
  padding: 20rpx;
  .jine{
    color: #7B7B7B;
    font-size: 28rpx;
    text{
      font-size: 36rpx;
      color: #FF6C1D;
      font-weight: bold;
    }
  }
  .qui{
    color: white;
    background: #45806E;
    height:62rpx;
    width: 160rpx;
    text-align: center;
    line-height: 62rpx;
    border-radius: 8rpx;
    margin-left: 20rpx;
    font-size: 28rpx;
    font-weight: bold;
  }
  .cancel{
    width: 160rpx;
    height: 62rpx;
    background: #FFFFFF;
    border: 2rpx solid #7B7B7B;
    opacity: 1;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #848484;
    text-align: center;
    line-height: 62rpx;
  }
}
</style>
